<template>
  <n-modal
    v-model:show="state.showFlag"
    class="system-modal"
    preset="card"
    transform-origin="center"
    :style="{ width: `${width}px` }"
    :title="state.title"
    @after-leave="emits('close')"
  >
    <n-spin :show="state.loadingFlag">
      <n-scrollbar :style="{ maxHeight: `${height}px`, padding: '0 20px' }">
        <n-form
          ref="formRef"
          :model="modelForm"
          label-placement="left"
          label-align="right"
          :label-width="labelWidth"
          :disabled="disabled"
          style="margin-top: 24px"
          require-mark-placement="left"
        >
          <slot />
        </n-form>
      </n-scrollbar>
    </n-spin>
    <template #footer>
      <n-flex class="button-group" justify="end">
        <n-button @click="onClose">取消</n-button>
        <n-button
          type="primary"
          :disabled="disabled"
          :loading="state.submitFlag"
          @click="onValidate"
        >
          确定
        </n-button>
      </n-flex>
    </template>
  </n-modal>
</template>
<script setup lang="jsx">
defineOptions({ name: 'MyForm' })
defineProps({
  modelForm: {
    type: Object,
    default: () => ({}),
  },
  width: {
    type: Number,
    default: 520,
  },
  height: {
    type: Number,
    default: 580,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  noPadding: {
    type: Boolean,
    default: false,
  },
  labelWidth: {
    type: Number,
    default: 80,
  },
})
const emits = defineEmits(['submit', 'close'])
const state = reactive({
  title: '',
  showFlag: false,
  loadingFlag: false,
  submitFlag: false,
})
const formRef = ref(null)
function onClose() {
  state.showFlag = false
  emits('close')
}
function onValidate(e) {
  e.preventDefault()
  formRef.value.validate((errors) => {
    if (!errors) {
      emits('submit')
    }
  })
}
function setState(key, value) {
  state[key] = value
}
defineExpose({
  setState,
})
</script>
<style lang="scss" scoped>
.button-group :deep(.n-button) {
  --n-padding: 0 30px !important;
}
</style>
<style lang="scss">
.system-modal {
  --n-close-icon-color: #030712 !important;
  --n-padding-left: 4px !important;
  .n-card-header {
    border-bottom: 1px solid #e7eaf0;
    padding: 20px;
  }
  .n-base-close::before {
    background: none !important;
  }
}
</style>
